<template>
    <div class="main">
        <!-- 搜索框 -->
        <serachTemplate></serachTemplate>
        <!-- 轮播图的位置 -->
        <swiper></swiper>
        <!-- 小广告展示位  -->
        <div class="list-hot">
            <!-- 热点 -->
            <div class="hot">
                热点
                <img src="./../../assets/images/laba.png" />
            </div>
            <div class="ul-list">
                <ul id="ul-turn">
                    <li class="turn"><router-link :to="{ name: '', params: {} }">即将上线：积分兑换，邀请好友，个人设置</router-link></li>
                    <li class="turn"><router-link to="/gameList">玩游戏，兑积分，换取话费</router-link></li>
                    <!-- <li class="turn"><router-link :to="{ name: '', params: {} }">2</router-link></li> -->
                </ul>
            </div>
        </div>
        <!-- 入口  -->
        <div class="enter">
        	<ul>
        		<li @click="enterClick('')">
        			<img src = "./../../assets/images/duihuan.png" />
        			<p>积分兑换</p>
        		</li>
        		<li @click="enterClick('./gameList')">
        			<img src = "./../../assets/images/youxi.png"  />
        			<p>娱乐</p>
        		</li>
        		<li @click="enterClick('./sign')">
        			<img src = "./../../assets/images/qiandao.png"  />
        			<p>签到</p>
        		</li>
        		<li @click="enterClick('')">
        			<img src = "./../../assets/images/yaoqing.png"  />
        			<p>邀请好友</p>
        		</li>
        		<li @click="enterClick('')">
        			<img src = "./../../assets/images/gershez.png"  />
        			<p>个人设置</p>
        		</li>
        		<li @click="enterClick('')">
        			<img src = "./../../assets/images/aboutus.png"  />
        			<p>关于积分</p>
        		</li>
        	</ul>
        </div>

        <!-- title -->
        <div class="module-title">精品商品</div>
        <!-- 热销  -->

        <div class="sellHot">
        	<div class="goods" v-for="item in goodsList" @click="toDetail(item.goodsNo)">
        		<div class="goodsImg">
        			<img :src="item.img"  />
        		</div>
        		<p>{{item.goodsName}}</p>
        	</div>

        </div>

    </div>
</template>
<script>
    import serachTemplate from "./../../components/search.vue";
    import swiper from "./../../components/swiper.vue";
    import userInfo from "./../../service/UserInfo";
    import goods from "./../../service/goods";
    import Mint from 'mint-ui';
    export default {
        data(){
            return {
                goodsList:"",
                openid:window.sessionStorage.getItem("beansOpenid")
            }
        },
        components:{
            serachTemplate,
            swiper
        },
        create(){

        },
        mounted(){
            this.turn();
            goods.get()
            .then(data => {
                if(data.code == "201") {
                    this.goodsList = data.info;
                }
            })
        },
        methods:{
            //  上下滚动
            turn(){
                var li = document.querySelectorAll(".turn"),
                    liH = li[0].innerHTML,
                    ul = document.getElementById("ul-turn");
                var num = 0;
                setInterval(function(){
                    num++;
                    if(num == li.length) {
                        num = 0;
                        var firstC = ul.firstChild;
                        ul.appendChild(firstC);
                        ul.style.marginTop = 0;
                    } else {
                        ul.style.marginTop = (-0.5*num)+"rem";
                    }
                },2000);
            },
            toDetail(goodsNo){
                Mint.MessageBox({
                  title:'提示',
                  message: '确定兑换该商品',
                  showCancelButton: true
              }).then(action => {
                    goods.rechange({openid:this.openid,goodid:goodsNo})
                    .then(data => {
                        if(data.code == "201") {

                        } else {
                            Mint.Toast(data.msg);
                        }
                    })
                });


            //	Mint.Toast("暂未开放");

            },
            enterClick(t){
            	if(t != "") {
            		this.$router.push({"path":t})
            	} else {
            		Mint.Toast("暂未开放");
            	}
            }
        }
    }
</script>
<style lang="scss">
    .main {
        .module-title {
            position: relative;
            width:100%;
            line-height: .8rem;
            color: #e61919;
            font-size: .4rem;
            font-weight: bold;
            text-align: center;
            margin:.2rem 0;
            &:before {
                content: "";
                position: absolute;
                width: .5rem;
                height: 2px;
                background: #e61919;
                left: 2.2rem;
                top:50%;
                margin-top: -1px;
            }
            &:after {
                content: "";
                position: absolute;
                width: .5rem;
                height: 2px;
                background: #e61919;
                right: 2.2rem;
                top:50%;
                margin-top: -1px;
            }
        }

        .list-hot {
            font-size: .3rem;
            line-height: .5rem;
            color: #e61919;
            padding-left: .2rem;
            border-bottom: 1px solid #ddd;
            background: #fff;
            position: relative;
            overflow: hidden;
            .hot {
                float: left;
                font-size: .3rem;
                line-height: .5rem;
                color: #e61919;
                img {
                    width: .5rem;
                    height: .5rem;
                    position: absolute;
                    top: 0;
                    left: .8rem;
                }
            }
            div.ul-list {
                position: absolute;
                width: auto;
                height: .5rem;
                overflow: hidden;
                font-size: .2rem;
                color: #999;
                left: 1.5rem;
                li {
                    line-height: .5rem;
                    max-width: 6rem;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
        .enter {
            background: #fff;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
            & > ul li {
                position: relative;
                width: 2.5rem;
                height: 1.5rem;
                float: left;
                text-align: center;
                line-height: 1rem;
                img {
                    width: .8rem;
                    height: .8rem;
                }
                p {
                    font-size: .3rem;
                    color:#999 !important;
                    line-height: initial;
                }
            }
        }
        .sellHot {
            background: #fff;
            padding: .15rem 0;
            overflow: hidden;
            .goods {
                float: left;
                margin-left: .3rem;
                overflow: hidden;
                border: 1px solid #ded9d9;
                margin-bottom: .2rem;
                padding: .1rem;
                border-radius: .1rem;
                .goodsImg {
                	width: 3rem;
                	height: 3rem;
                	img {
	                    width: 100%;
	                    height: 100%;
	                }
                }
                p {
                    color: #fff;
				    font-size: .24rem;
				    border-radius: .1rem;
				    line-height: .6rem;
				    text-align: center;
				    margin-top: .15rem;
				    background: #d5e644;
				    // background: #999;
                }
            }
        }
    }
</style>
